<template>
	<div>
		<div class="nav-heads">
			<div class="vue-btn">
				<div class="box">
					<img class="img" src="../../assets/img/a2.png" alt="" />
					<div>金融广场红鑫驿站党建云平台</div>
				</div>
				<!-- 右上角信息 -->
				<Message />
			</div>
		</div>
		<div class="navs2 vue-btn">
			<div class="navs2-box">
				<div @click="tabs(item.type)" v-for="(item, index) in items" :key="index">{{ item.name }}</div>
			</div>
			<!-- <div>2021/10/21</div> -->
		</div>
		<el-container class="content">
			<!-- 左侧导航 -->
			<Nav v-show="active == 2 || active == 3" :message="active" />
			<el-container>
				<el-header v-show="active == 2 || active == 3">
					<!-- 面包屑 -->
					<Breadcumb />
				</el-header>

				<!-- 主体展示信息 -->
				<el-main>
					<!-- 路由出口 -->
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import Nav from './Nav';
import Breadcumb from './Breadcumb';
import Message from './Message';

export default {
	name: 'home',
	data() {
		return {
			active: '',
			items: [{ type: 1, name: '首页' }, { type: 2, name: '党建宣传' }, { type: 3, name: '云课堂' }, { type: 4, name: '党建活动' }]
		};
	},
	components: {
		Nav,
		Breadcumb,
		Message
	},
	// 刚登录后首页接口这里调用，否则token更新不及时
	created() {
		if (!localStorage.getItem('active')) {
			this.active = 1;
			this.tabs(this.active);
		} else {
			this.active = localStorage.getItem('active');
			this.tabs(this.active);
		}
	},
	mounted() {
		// this.$message({
		// 	offset: 200,
		// 	showClose: true,
		// 	message: '恭喜你，这是一条成功消息',
		// 	type: 'success'
		// });
		
	},
	methods: {
		tabs(type) {
			// this.$message(e);
			localStorage.setItem('active', type);
			this.active = type;
		}
	}
};
</script>
<style lang="scss">
.nav-heads {
	background: url('../../assets/img/a5.png') no-repeat center;
	background-size: 100% 100%;
	width: 100%;
	height: 110px;
	box-sizing: border-box;
	padding: 25px 20%;
	white-space: nowrap;
}

.box {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #cb1c1d;
	font-weight: 800;
	font-size: 40px;
}
.img {
	width: 60px;
	height: 60px;
	margin-right: 30px;
}
.navs2 {
	white-space: nowrap;
	background: #cb1c1d;
	width: 100%;
	padding: 0px 20%;
	color: #ffffff;
}
.navs2-box {
	display: flex;
	align-items: center;
}
.navs2-box div {
	padding: 15px;
}
.navs2-box div:hover {
	background: #b00000;
}
/* 设置整体 */
.content {
	width: 1200px;
	margin: 0 20%;
}
.el-container {
	height: 100%;
}
.el-header {
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
	color: #333;
}

.el-aside {
	background-color: #409eff;
	color: #ffffff;
	text-align: left;
}

/* 主体 */
.el-main {
	background-color: #ffffff;
	padding: 0;
	margin: 0;
}
</style>
